<template>
  <div>
    <el-descriptions :column="2" size="medium" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          资产标签号
        </template>
        {{ formRules.target.assetTag }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          资产名称:
        </template>
        {{ formRules.target.equipmentName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          具体位置:
        </template>
        {{ formRules.target.specificLocation }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          责任人编号:
        </template>
        {{ formRules.target.responsiblePersonId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          责任人姓名:
        </template>
        {{ formRules.target.responsiblePersonName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          盘查人员:
        </template>
        {{ formRules.checkPersonName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          盘查时间:
        </template>
        {{ formRules.createTime}}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label">
          <i class="el-icon-tickets"></i>
          是否合格:
        </template>
        <el-tag type="success" size="medium" v-if="formRules.checkResult">是</el-tag>
            <el-tag type="danger" size="medium" v-else>否</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="盘查地址:" :span="2"> {{ formRules.signature }}</el-descriptions-item>
      <el-descriptions-item label="情况说明:" :span="2"> {{ formRules.checkNotes }}</el-descriptions-item>

      <el-descriptions-item label="现场图片" :span="2" v-if="formRules.urls">
        <div style="display: flex;gap: 10px;">
          <img v-for="img in formRules.urls" @click="previewBigImage([img])"
            :src="img" style="width: 100px;height: 100px;" />
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-image-viewer v-if="showViewer" :on-close="() => { showViewer = false }" :url-list="srcList" />
  </div>
</template>

<script>
import { Message } from 'element-ui'
import EquipmentTableApi from '../api/equipmentTable'
import icon1 from "../../../assets/images/digitzation/icon1.png"
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  name: 'EquipmentTableEdit',
  components: {
    ElImageViewer
  },
  props: {
    mode: {
      type: String
    },
    record: {
      type: Object
    }
  },
  data() {
    return {
      formRules: {
        targe:{}
      },
      editLoading: false,
      srcList:[],
      showViewer:false,
      icon1
    }
  },
  methods:{
    previewBigImage(srcList) {

      this.srcList = srcList;
      this.showViewer = true;
    },
  },
  watch: {
    record: {
      handler: function (oldValue, newValue) {
        if (this.record.checkId) {
          EquipmentTableApi.equipmenttableCheckDetail(this.record.checkId).then(res => {
            if (res.data.code == 200) {
              this.formRules = res.data.data
            }
          })
        }
      },
      immediate: true,
      deep: true
    }
  }

}
</script>
<style>
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  color: #000 !important;
}

.el-image-viewer__wrapper {
  z-index: 4000 !important;
}
</style>